<template>
	<div class="admin">
		<el-card class="!border-none" shadow="never">
			<el-form class="mb-[-16px]" :model="formData" inline>
				<el-form-item label="单据日期">
					<el-date-picker class="w-56" v-model="date" type="daterange" format="YYYY/MM/DD"
						value-format="YYYY-MM-DD" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" />
				</el-form-item>
				<el-form-item label="单据类型">
					<el-input v-model="formData.title" class="w-56" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card v-loading="pager.loading" class="mt-4 !border-none" shadow="never">
			<el-button v-perms="['auth.admin/add']" type="primary" @click="handleAdds">
				<template #icon>
					<icon name="el-icon-Setting" />
				</template>
				表单设置
			</el-button>
			<div class="mt-4">
				<el-table :data="pager.lists" size="large">
					<el-table-column label="序号" width="100" type="index"></el-table-column>
					<template v-for="(item,index) in options.tableTile" :key="index">
						<el-table-column v-if="item.display==1" :label="item.name" :prop="item.prop"></el-table-column>
					</template>
				</el-table>
			</div>
			<div class="flex mt-4 justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
	</div>
</template>

<script lang="ts" setup>
	import {
		adminLists
	} from '@/api/water/list'
	import {
		usePaging
	} from '@/hooks/usePaging'
	import {
		getOrderFlowFieldDisplay,
		setOrderFlowFieldDisplay
	} from '@/api/water/list'
	// import feedback from '@/utils/feedback'
	import EditPopup from './settable.vue'
	const editRef = shallowRef < InstanceType < typeof EditPopup >> ()
	const options = reactive({
		listColumn: [] as any[],
		jczq: [] as any[],
		tableTile: [] as any[],
	})

	// 表单数据
	const formData = reactive({
		id: ''
	})
	watch(formData, (newValue, oldValue) => {
		// console.log('newValue----www', newValue)
	}, {
		deep: true
	})
	const date = ref([])
	const showEdit = ref(false)
	const {
		pager,
		getLists,
		resetParams,
		resetPage
	} = usePaging({
		fetchFun: adminLists,
		params: formData
	})
	const handleAdds = async () => {
		showEdit.value = true
		await nextTick()
		editRef.value?.open('add')
	}
	const getOptions = () => {
		getOrderFlowFieldDisplay({
			page_type: 0
		}).then((data: any) => {
			// console.log('admingetFieldDisplay', JSON.parse(data.order_flow))
			let arry = JSON.parse(data.order_flow)
			arry[0].prop = 'user'
			arry[1].prop = 'create_time'
			arry[2].prop = 'warehouse_name'
			arry[3].prop = 'create_time'
			arry[4].prop = 'type_name'
			arry[5].prop = 'warehouse_name'
			arry[6].prop = 'quantity'
			arry[7].prop = 'unit_name'
			arry[8].prop = 'cate_name'
			arry[9].prop = ''
			arry[10].prop = ''
			arry[11].prop = 'model'
			arry[12].prop = 'spec'
			arry[13].prop = 'order_no'
			arry[14].prop = 'title'
			arry[15].prop = 'no'
			arry[16].prop = 'confirm_user_name'
			arry[17].prop = 'confirm_time'
			arry[18].prop = ''
			arry[19].prop = 'remark'
			arry[20].prop = 'delivery_plate_number'
			arry[21].prop = 'delivery_tel'
			options.tableTile = arry

		})
	}

	// const handleEdit = async (data: any) => {
	//     showEdit.value = true
	//     await nextTick()
	//     editRef.value?.open('edit')
	//     editRef.value?.setFormData(data)
	// }

	// const handleDelete = async (nid: number) => {
	//     await feedback.confirm('确定要删除？')
	//     await adminDelete({ nid })
	//     getLists()
	// }
	onMounted(() => {
		// getOptions()
		// getLists()
	})
</script>
